<template>
  <div class="chart-box">
    <div class="title">
      <div class="borderNone">
        <el-select
          v-model="params.type"
          class="m-2"
          :placeholder="currentTitle"
          style="width: 120px"
          size="large"
        >
          <el-option
            @click="menuListBtn(item)"
            v-for="item in menuList"
            :key="item.type"
            :label="item.label"
            :value="item.type"
            :style="{ color: currentTitle === item.label ? '#165dff' : '' }"
          />
        </el-select>
      </div>
      <el-select
        v-if="title == '收入概览'"
        @change="handleYearChange"
        v-model="params.moneyType"
        class="m-2 ml10 money"
        placeholder="钱包类型"
        style="width: 180px"
        clearable
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
      >
        <el-option
          v-for="item in walletList"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item == '钱包类型'"
        />
      </el-select>
      <el-select
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
        @change="handleYearChange"
        v-model="params.year"
        class="m-2 ml10"
        placeholder="年份"
        size="large"
        style="width: 120px"
      >
        <el-option
          v-for="item in yearList"
          :key="item.year"
          :label="item.year"
          :value="item.value"
          :disabled="item.year === '年份'"
        />
      </el-select>
      <el-button
        class="ml10"
        @click="handleClick(index)"
        v-for="(item, index) in dateTimeData"
        :key="index"
        :type="item.active ? 'primary' : ''"
        >{{ item.name }}</el-button
      >
    </div>
    <div class="cards">
      <div class="cardItem" v-for="(item, index) in dataList" :key="index">
        <p class="name">{{ item.name }}</p>
        <p class="money">{{ item.money }} <span class="fz12">元</span></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getMoneyType } from '@/api/money/moneyLog.js';
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  dataList: {
    type: Array,
    default: () => [],
  },
  menuList: {
    type: Array,
    required: true,
  },
});
// 使用一个 ref 来存储 props.title 的值
const currentTitle = ref(props.title || 0);
const emit = defineEmits(['menuBtn', 'yearChange']);
const yearList = ref([]);
let currentYear = new Date().getFullYear(); // 获取当前年份

for (let i = 0; i <= 5; i++) {
  yearList.value.push({ year: currentYear - i, value: currentYear - i });
}
yearList.value.unshift({ year: '年份', value: '年份' });

const params = ref({
  moneyType: '',
  type: '',
  year: currentYear,
  dateType: 1,
});

const dateTimeData = ref([
  {
    name: '昨天',
    type: 1,
    active: false,
  },
  {
    name: '近7天',
    type: 2,
    active: false,
  },
  {
    name: '近30天',
    type: 3,
    active: false,
  },
]);
function handleClick(index) {
  dateTimeData.value.forEach((item, i) => {
    item.active = i === index; // 只激活被点击的按钮
  });
  toDate(index); // 调用原方法
}
const toDate = (type) => {
  params.value.dateType = type + 1;
  params.value.year = '';
  emit('yearChange', { ...params.value });
};

//钱包类型
const walletList = ref([]);
// 点击概况
const menuListBtn = (val) => {
  currentTitle.value = '';
  params.value.type = val.type;
  params.value.year = '';
  if (props.title == '收款') {
    val.label == '收入概览' ? (params.value.type = 1) : (params.value.type = 2);
  }
  emit('menuBtn', params);
};
// 明确声明 yearList 是一个存储数字的数组
const handleYearChange = () => {
  params.value.dateType = 0;
  emit('yearChange', { ...params.value });
};
//获取钱包筛选接口
const SelectFilter = () => {
  getMoneyType().then((res) => {
    //钱包类型
    walletList.value = res.data.wallet;
    walletList.value.unshift('钱包类型');
  });
};
onMounted(() => {
  SelectFilter();
});
</script>

<style scoped lang="scss">
@import '@/assets/styles/global.scss';
:deep(.el-select-dropdown__item.is-selected) {
  color: var(--text-primary-color) !important;
}
// :deep(.el-select-dropdown__item.is-selected) {
//   color: none;
// }
:deep(.el-select__wrapper) {
  min-height: 32px !important;
}

.borderNone :deep(.el-select__wrapper) {
  box-shadow: none !important;
  margin-left: -16px !important;

  /* 其他样式调整... */
}

.borderNone :deep(.el-select__icon) {
  //   font-weight: 500 !important;
  //   color: #1d2129 !important;
  margin-left: -42px !important;
}
.active {
  color: var(--primary-color);
  font-weight: bold;
}
.chart-box {
  .title {
    display: flex;
    align-items: center;
  }
  .borderNone {
    flex: 1;
    // 取消el-select的边框
    :deep(.el-input) {
      width: 120px;
      --el-input-focus-border: #fff;
      --el-input-transparent-border: 0 0 0 0px;
      --el-input-border-color: #fff;
      --el-input-hover-border: 0px !important;
      --el-input-hover-border-color: #fff;
      --el-input-focus-border-color: #fff;
      --el-input-clear-hover-color: #fff;
      box-shadow: 0 0 0 0px !important;
      --el-input-border: 0px;
    }
    :deep(.el-select .el-input__wrapper.is-focus) {
      box-shadow: 0 0 0 0px !important;
    }
    :deep(.el-select .el-input.is-focus .el-input__wrapper) {
      box-shadow: 0 0 0 0px !important;
    }
    :deep(.el-select) {
      --el-select-border-color-hover: #fff;
    }
  }
}
.cards {
  display: grid;
  /* 定义三列，每列宽度相等，并且列之间有10px的间隔（通过gap属性实现） */
  grid-template-columns: repeat(4, 1fr); /* 1fr是网格容器可用空间的一份 */
  /* 由于每列有四个项目，我们需要足够的行来容纳它们 */
  grid-auto-rows: auto; /* 自动调整行高以适应内容 */
  /* 设置网格项之间的水平和垂直间距 */
  gap: 10px 10px; /* 第一个值是水平间距，第二个值是垂直间距 */
  height: 100%;
  margin-top: 20px;
  margin-bottom: 30px;
  .cardItem {
    /* 网格项的内容样式 */
    padding: 20px;
    height: 93px;
    text-align: center;
    background: #fafafa;
    border-radius: 4px 4px 4px 4px;
    .fz12 {
      font-size: 12px;
    }
    .name {
      height: 14px;
      font-size: 14px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #4e5969;
      line-height: 14px;
      margin-bottom: 12px;
    }
    .money {
      font-size: 34px;
      font-family: BEBAS;
      font-weight: 400;
      color: #4e5969;
      line-height: 23px;
    }
  }
}
</style>
<style scoped>
/* 去掉选中项的默认背景颜色 */
.el-select-dropdown__item.is-selected {
  background-color: transparent !important; /* 或者您想要的颜色 */
  color: var(--primary-color) !important;
  font-weight: 400 !important;
}

/* 如果需要也可以去掉文字的高亮颜色 */
.el-select-dropdown__item.is-selected:hover {
  background-color: transparent !important;
}
</style>
